﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Viewer.Default" %>
<!DOCTYPE html>
<html> 
  <head> 
    <title>Google Maps JavaScript API v3 Example: Map Simple</title> 
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <style type="text/css"> 
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 300px;
        width : 300px;
        
      }
      table
      {
      	background-color:#d0e4fe;
      	width : 300px;
      	}
    </style> 
     <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> 
 
    <script type="text/javascript">
        var map;

        function initialize() {
            var myOptions = {
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

          
            

            // Try HTML5 geolocation
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);


                    var lat = document.getElementById('LatitudeBox');
                    lat.value = position.coords.latitude;
                    lat.style.display = 'None';
                    
                    var longi = document.getElementById('LongitudeBox');
                    longi.value = position.coords.longitude;
                    longi.style.display = 'None';
                    
                    var infowindow = new google.maps.InfoWindow({
                        map: map,
                        position: pos,
                        content: document.getElementById('Place')
                    });

                    map.setCenter(pos);
                }, function() {
                    handleNoGeolocation(true);
                });
            } else {
                // Browser doesn't support Geolocation
                handleNoGeolocation(false);
            }
        }

        function handleNoGeolocation(errorFlag) 
        {
            if (errorFlag) {
                var content = 'Error: The Geolocation service failed.';
            } else {
                var content = 'Error: Your browser doesn\'t support geolocation.';
            }

            var options = {
                map: map,
                position: new google.maps.LatLng(60, 105),
                content: content
            };

            var infowindow = new google.maps.InfoWindow(options);
            map.setCenter(options.position);


           
            
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script> 
  </head> 
  <body> 
    
      <form id="form1" runat="server">
      
      <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
   
   
   <div id='Place'>
       <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
      <asp:TextBox ID="PlaceName" runat="server" ></asp:TextBox>
      </div>
  <table>
  <tr>
  <td>
  
      
      
      </td>
  </tr>
  <tr>
  <td><div id="map_canvas"></div></td>
  </tr>
  <tr>
      
  <td>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
          <asp:ImageButton ID="ImageButton1" runat="server" 
              ImageUrl="~/App_Data/button.png" onclick="ImageButton1_Click" Width="100px" />
 
          <asp:TextBox ID="LatitudeBox" runat="server" Height="20px" Width="38px" ></asp:TextBox>
          <asp:TextBox ID="LongitudeBox" runat="server" Height="20px" Width="38px"></asp:TextBox>
 
          <asp:Label ID="Label2" runat="server" Text="Status"></asp:Label>
 
         
 
 </ContentTemplate>
     </asp:UpdatePanel> 
  </td></tr>
  </table>
  
      </form>
    
    
  </body> 
</html> 